<template>
  <div class="repairDetail" style="overflow-x: hidden;
    overflow-y: hidden;">
    <div class="header-wrap">
      <span class="header-wrap-left" @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">报修详情</span>
      <span class="header-wrap-right"></span>
    </div>
    <div class="content-tips" style="margin-top: 1.5rem">
      {{ listData.residential_text }}
    </div>
    <div class="repairDetail-list">
      <span class="list-title" style="font-size:.3rem;">报修日期</span>
      <div class="list-content">
        <van-field left-icon="notes-o" disabled clearable v-model="listData.createtime_text"/>
      </div>
    </div>
    <div class="content-tips">
      <span>处理状态</span>
      <span class="state" v-if="listData.repair_state==0">未处理</span>
      <span class="state" v-if="listData.repair_state==1">处理中</span>
      <span class="state" v-if="listData.repair_state==3">已完成</span>
      <span class="state" v-if="listData.repair_state==4">已拒绝</span>
      <span class="state" v-if="listData.repair_state==5">已评价</span>
    </div>
    <div class="listImg" v-if="listData.repair_imgs!=0">
      <ul>
        <li @click="imageChange(index)" v-for="(img,index) in listData.repair_imgs" :key="index">
          <img :src="host+img" alt="">
        </li>
      </ul>
    </div>
    <div class="content-tips">
      联系人
    </div>
    <div class="repairDetail-list">
      <div class="list-content">
        <span>
          <van-field disabled clearable v-model="listData.household_name"/>
        </span>
      </div>
    </div>
    <div class="content-tips">
      联系电话
    </div>
    <div class="repairDetail-list">
      <div class="list-content">
        <span>
          <van-field class="setColor" disabled clearable v-model="listData.household_phone"/>
        </span>
      </div>
    </div>
    <div class="content-tips">
      报修位置
    </div>
    <div class="repairDetail-list">
      <div class="list-content">
        <span>
          <van-field disabled clearable v-model="listData.remark"/>
        </span>
      </div>
    </div>
    <div class="content-tips">
      报修内容
    </div>

    <div class="repairContent">
      {{ listData.repair_content }}
    </div>
    <div class="submit" @click="urge" v-if="listData.could_urge">
      催促处理
    </div>
    <div class="submit" @click="goback" v-if="listData.urgency>0">
      已催促处理中请耐心等待 | 返回
    </div>
    <div v-if="listData.repair_state==5">
      <div class="content-tips">
        我的评分
      </div>
      <div class="repairDetail-list">
        <div class="list-content">
        <span>
          <van-field class="setColor" disabled clearable v-model="listData.score_text"/>
        </span>
        </div>
      </div>
      <div class="content-tips">
        评价内容
      </div>
      <div class="repairDetail-list">
        <div class="list-content">
        <span>
          <van-field class="setColor" disabled clearable v-model="listData.judge_content"/>
        </span>
        </div>
      </div>
    </div>
    <div class="submit" @click="goback" v-if="listData.repair_state==1||listData.repair_state==2||listData.repair_state==4||listData.repair_state==5">
      返回
    </div>

    <div class="evaluate" v-if="listData.should_pay">
      <div class="evaluate-tips">
        需要缴纳费用
      </div>
      <div class="cost">
        <div class="cost-item">
          <div class="cost-name">
            材料费：￥
          </div>
          <div class="cost-value">
            {{ listData.repair_serve_price }}
          </div>
        </div>
        <div class="cost-item">
          <div class="cost-name">
            服务费：￥
          </div>
          <div class="cost-value">
            {{ listData.repair_material_price }}
          </div>
        </div>
      </div>
      <div class="addEvaluate" @click="reparipay">
        <span>去支付</span>
      </div>
    </div>
    <div class="zhanwei" v-if="listData.should_pay"></div>

    <div class="evaluate" v-if="listData.should_judge">
      <div class="evaluate-tips">
        请对本次的服务进行评价
      </div>
      <div class="evaluate-star">
        <van-rate
          style="width: auto;"
          v-model="score"
          void-icon="star"
          void-color="#6b5da6"
          color='#ffa272'
          @change='change(score)'
          count="3"
          size=".4rem"
        />
      </div>
      <div class="addre">
        <van-field
          clearable
          type="textarea"
          rows="1"
          autosize
          v-model="content"
          placeholder="输入评价内容"/>
      </div>
      <div class="addEvaluate" @click="addjudge">
        <span>提交</span>
        <!-- <span>结束</span> -->
      </div>
    </div>
    <div class="zhanwei" v-if="listData.should_judge"></div>
  </div>

</template>
<script>
import wx from 'weixin-js-sdk'
import {Rate, Field} from 'vant';
// import 'swiper/dist/css/swiper.css'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
// import listSwiper from './components/listSwiper'
import api from '../../api/api.js'

export default {
  data() {
    return {
      score: 3, //评价分数
      content: '', //评价内容
      Id: '',
      host: api.host,
      show: false,
      index: 0,
      listData: [],
      imgUrls: [],
      newImglist: [],
      swiperOption: {
        slidesPerView: 2.56,
        spaceBetween: 30,
        freeMode: true,
      },
      config_data: {},
    }
  },
  created() {
    this.request()
  },
  methods: {
    addjudge() {
      var _content = this.content;
      if (!_content) {
        _content = '无'
      }
      this.$post(api.repairjudge, {
        id: this.Id,
        score: this.score,
        content: _content
      }).then((response) => {
        if (response.data.code == 1) {
          this.$toast('已提交评价信息');
          window.location.reload()
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    change(score) {
      this.score = score
    },
    //查看图片
    imageChange(index) {
      wx.previewImage({
        current: this.newImglist[index],
        urls: this.newImglist
      })
    },
    // 获取详情列表
    request() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.Id = this.$route.query.id
      this.$get(api.increasedetails, {
        params: {
          id: this.Id,
        }
      }).then((response) => {
        if (response.data.code === 1) {
          this.$toast.clear();
          this.listData = response.data.data
          this.listData.repair_imgs.map((item, index) => {
            this.newImglist[index] = this.host + item
          })
        }
      }).catch((error) => {
        this.$toast.clear();
        console.log(error);
      });
    },
    // 催促办理
    urge() {
      this.Id = this.$route.query.id
      this.$get(api.detailsinporoce, {
        params: {
          id: this.Id,
        }
      }).then((response) => {
        if (response.data.code == 1) {
          window.location.reload()
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    goback() {
      this.$router.go(-1)
    },
    reparipay() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.reparipay, {
        params: {
          id: this.Id,
        }
      }).then((response) => {
        if (response.data.code == 1) {
          this.$toast.clear();
          this.config_data = response.data.data;
          this.onBridgeReady();
        } else {
          this.$toast.fail('请求失败' + response.data.msg);
        }
      }).catch((error) => {
        this.$toast.clear();
        console.log(error);
      });
    },
    onBridgeReady() {
      console.log('进到onReady');
      var that = this;
      WeixinJSBridge.invoke('getBrandWCPayRequest', this.config_data,
        function (res) {
          console.log('支付成功');
          that.listData.should_pay = false;
          if (res.err_msg === "get_brand_wcpay_request:ok") {
            that.$toast.success('支付成功,稍后请刷新页面');
          }
          that.$toast.success('支付失败,请稍后再试');
        });
    },
  },
  components: {
    [Rate.name]: Rate,
    [Field.name]: Field,
  }
}
</script>
<style>
.repairDetail .van-icon-notes-o:before {
  color: #FD5585;
  font-size: .4rem;
}

.repairDetail .van-field__left-icon .van-icon, .van-field__right-icon .van-icon {
  min-width: .6rem;
}

.setColor .setColor .van-field__control:disabled {
  color: #FD5585;
}
</style>

<style scoped>
.van-rate__item:not(:last-child) {
  padding-right: .25rem;
}

.evaluate {
  border-top: 1px solid #a0a0a0;
  border-radius: 15px;
  z-index: 888;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #fff;
}

.evaluate-star {
  margin-bottom: .2rem;
  height: 30%;
  text-align: center;
  line-height: .3rem;
}

.evaluate-tips {
  margin: .1rem 0;
  height: 30%;
  font-size: .32rem;
  line-height: .62rem;
  text-align: center;
  color: #FD5585;
}

.addEvaluate {
  display: flex;
  width: 70%;
  margin: .2rem auto;
  height: 40%;
  line-height: .7rem;
  color: #fff;
  border-radius: .4rem;
  text-align: center;
}

.addEvaluate span {
  flex: 1;
  border-radius: .1rem;
  display: block;
  text-align: center;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
}

.addEvaluate span:nth-of-type(1) {
  margin-right: .15rem;
}

.addEvaluate span:nth-of-type(2) {
  margin-left: .15rem;
}

.addre {
  margin: 0 1.2rem;
}

.zhanwei {
  height: 185px;
}

.content-tips {
  margin: .5rem .5rem .25rem .5rem;
  color: #57c5c6;
  font-size: .3rem;
  font-weight: bold;
}


.list-content {
  display: flex;
  margin: .15rem .5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .45rem;
  font-weight: bold;
}

.list-content span {
  flex: 1;
}

.repairDetail .repairDetail-list {
  margin-bottom: .3rem;
  font-weight: bold;
}

.repairDetail .repairDetail-list .van-cell {
  background: none;
  padding: .26rem .3rem;
}

.repairDetail .repairDetail-textarea .van-cell {
  background: #2E294E;
  padding: .15rem .15rem;
  border: 1px solid #57c5c6;
  border-radius: .2rem;
}

.list-title {
  display: block;
  margin: 0rem .5rem;
  color: #57c5c6;
}

.minHeight {
  min-height: 3rem;
  padding: .15rem;
}

.state {
  margin-left: .3rem;
  font-size: .28rem;
  color: #FD5585;
  display: inline-block;
}

.listImg {
  margin: 0 .5rem;
}

.listImg ul {
  display: flex;
  flex-wrap: wrap;
}

.listImg ul li {
  width: 45%;
  height: 4rem;
  border-radius: .2rem;
}

.listImg ul li:nth-child(odd) {
  margin: .1rem .2rem .1rem 0;
  width: 46%;
}

.listImg ul li:nth-child(even) {
  margin: .1rem 0rem .1rem .2rem;
  width: 46%;
}

.listImg ul li img {
  width: 100%;
  height: 100%;
  border-radius: .2rem;
}

.repairContent {
  word-break: break-all;
  margin: .3rem .5rem .4rem;
  color: #000;
  font-weight: bold;
  padding: .26rem .3rem;
  border: 1px solid #ddd;
  border-radius: .45rem;
}

.submit {
  margin: .3rem .5rem .25rem .5rem;
  height: 1rem;
  line-height: 1rem;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .5rem;
  font-weight: bold;
}

.cost {
  font-size: .3rem;
}

.cost-item {
  margin-bottom: .1rem;
}

.cost-name {
  text-align: right;
  width: 45%;
  display: inline-block;
}

.cost-value {
  display: inline-block;
}
</style>
